import { designComponents } from 'src/use/designComponents';
import { AppNavigator } from '../navigator/app-navigator';
import './menus.scss';

export const MENUS = [
  {
    group: '基础',
    list: [
      {
        title: 'Color',
        subTitle: '颜色',
        path: 'normal/color',
      },
      {
        title: 'Icon',
        subTitle: '图标',
        path: 'normal/icon',
      },
      {
        title: 'Button',
        subTitle: '按钮',
        path: 'normal/button',
      },
      {
        title: 'Layout',
        subTitle: '布局',
        path: 'normal/layout',
      },
    ],
  },
  {
    group: '表单组件',
    list: [
      {
        title: 'Input',
        subTitle: '输入框',
        path: 'normal/input',
      },
    ],
  },
];

// 用tsx 方式写组件
export const AppMenus = designComponents({
  setup() {
    const navigator = AppNavigator.use.inject();

    return {
      render: () => {
        return (
          <div class="app-menus">
            {MENUS.map((g, i) => {
              return (
                <ul>
                  <li class="group-title">{g.group}</li>
                  {g.list.map((item, i) => (
                    <li key={i} onClick={() => navigator.methods.go(item.path)} class="com-item">
                      <span class="title">{item.title}</span>
                      <span class="subtitle">{item.subTitle}</span>
                    </li>
                  ))}
                </ul>
              );
            })}
          </div>
        );
      },
    };
  },
});
